<template>
  <!-- 底部 -->
  <div class="footer">
    <div class="footer-container">
      <div class="footerList">
        <div class="footerItem">
          <h4>订单服务</h4>
          <ul class="footerItemCon">
            <li><a href="#">购买指南</a></li>
            <li><a href="#">支付方式</a></li>
            <li><a href="#">送货政策</a></li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>服务支持</h4>
          <ul class="footerItemCon">
            <li><a href="#">官方开源</a></li>
            <li><a href="#">项目前端</a></li>
            <li><a href="#">项目后端</a></li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>自助服务</h4>
          <ul class="footerItemCon">
            <li><a href="#">个人博客</a></li>
            <li><a href="#">个人简介</a></li>
            <li><a href="#">个人简介</a></li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>其他项目</h4>
          <ul class="footerItemCon">
            <li><a href="#">XPay支付系统</a></li>
            <li><a href="#">数据共享</a></li>
            <li><a href="#">待开发...</a></li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>友情链接</h4>
          <ul class="footerItemCon">
            <li><a href="#">宇ccc</a></li>
            <li><a href="#">smartisan</a></li>
            <li><a href="#">Vue</a></li>
          </ul>
        </div>
        <div class="footerItem">
          <h4>关注我吧</h4>
          <ul class="footerItemCon">
            <li><a href="#">腾讯QQ</a></li>
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">官方邮箱</a></li>
          </ul>
        </div>

        <ul class="footerItemLast">
          <li><a href="#" style="font-size: 30px">0123456789</a></li>
          <li><span style="color: #c3c8d3">周一至周日 10:00-23:00</span></li>
          <li class="a"><input type="button" value="在线帮助" /></li>
        </ul>
      </div>
      <div class="copyright">
        <ul class="helpLink">
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            联系我们
            <span class="space"></span>
          </li>
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            商家入驻
            <span class="space"></span>
          </li>
          <li>
            营销中心
            <span class="space"></span>
          </li>
          <li>
            友情链接
            <span class="space"></span>
          </li>
          <li>
            关于我们
            <span class="space"></span>
          </li>
          <li>
            营销中心
            <span class="space"></span>
          </li>
          <li>
            友情链接
            <span class="space"></span>
          </li>
          <li>关于我们</li>
        </ul>
        <p>地址：北京市昌平区宏福科技园综合楼6层</p>
        <p>京ICP备19006430号</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Footer',
}
</script>

<style lang="less" scoped>
.footer {
  background-color: #eaeaea;
  a {
    text-decoration: none;
  }
  .footer-container {
    width: 1200px;
    margin: 0 auto;
    padding: 0 15px;

    padding-top: 50px;

    .footerList {
      padding: 20px;
      border-bottom: 1px solid #e4e1e1;
      border-top: 1px solid #e4e1e1;
      overflow: hidden;
      padding-left: 40px;

      .footerItem {
        // width: 14%;
        float: left;

        h4 {
          // font-size: 14px;
          font-weight: 400;
          margin-bottom: 14px;
          color: #646464;
        }

        .footerItemCon {
          li {
            line-height: 18px;
            color: #a39696;
            margin-top: 5px;
            width: 149px;
          }
        }
      }
      .footerItemLast {
        float: right;
        li {
          margin-bottom: 14px;
          &:last-child input {
            width: 130px;
            height: 34px;
            font-size: 14px;
            color: #5079d9;
            border: 1px solid #dcdcdc;
            margin-top: 8px;
            cursor: pointer;
          }
        }
      }
    }

    .copyright {
      padding: 20px;

      .helpLink {
        text-align: center;

        li {
          display: inline;

          .space {
            border-left: 1px solid #666;
            width: 1px;
            height: 13px;
            background: #666;
            margin: 8px 10px;
          }
        }
      }

      p {
        margin: 10px 0;
        text-align: center;
      }
    }
  }
}
</style>
